<template>
<h2>用户投资页面</h2>
<table class="table-bordered" border="1">
    <tr>
        <td>项目名称</td>
        <td>{{ Info.I_Name }}</td>
    </tr>
    <tr>
        <td>投资总金额</td>
        <td>{{ Info.I_Budget }}</td>
    </tr>
    <tr>
        <td>已投金额</td>
        <td>{{ Info.I_Receive }}</td>
    </tr>
    <tr>
        <td>剩余金额</td>
        <td>{{ Info.I_Residue }}</td>
    </tr>
    <tr>
        <td>投资金额</td>
        <td><input type="text" v-model="Imoney" @change="GetMoeny"></td>
    </tr>
    <tr>
        <td>预期最高收益</td>
        <td>{{ Iapy.toFixed(2)}}CNY</td>
    </tr>
    <tr>
        <td colspan="2">
            <button @click="AddUserInvest" class="btn btn-success">确认投资</button>
        </td>
    </tr>
    
</table>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'; 
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter()
import { useUserStore } from '../../Store';
const userUser = useUserStore()
const route=useRoute()
const Imoney=ref("")
const Iapy=ref(0)
const Info = ref({
    I_Name:'',
    I_Budget:0,
    I_Receive:0,
    I_Residue:0
})
onMounted(()=>{
    ShowInvestById()
})
const ShowInvestById=()=>{
    axios.get('https://localhost:44358/api/Invest/GetInvestById',
        {
            params:{
                Iid:route.query.I_Id
            }
        }
    )
    .then(res=>{
        Info.value=res.data
    }).catch(err=>{
        console.log(err)
    })
}
//获取最高收益
const GetMoeny=()=>{
   Iapy.value=Number( Imoney.value)*1.3/100
}
const AddUserInvest=()=>{
    if(Imoney.value==""){
        alert("投资金额不能为空")
        return
    }
    if(isNaN(Number(Imoney.value))){
        alert("请输入数字")
        return
    } 
    if(Number(Imoney.value)>Info.value.I_Residue||Number(Imoney.value)<=0){
            alert("投资金额不能为空且不能大于剩余金额")
            return
    }
    axios.post('https://localhost:44358/api/Invest/AddUserInvest',
        {
            I_id:route.query.I_Id,
            U_Id:userUser.Uid,
            UI_Money:Imoney.value
        }
    )
    .then(res=>{
        if(res.data==1){
            alert("投资成功")
            router.push({path:'/ShowUserInvest'})
        }else{
            alert("投资失败")
        }
    }).catch(err=>{
        console.log(err)
    })
}

</script>